<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/main.css" />
    <script src="../../script/vue.min.js"></script>
    <script src="../../script/fastclick.js"></script>
    <style>
        #header {
          background: linear-gradient(to right, #49b2fb, #3969fb);
          color: #fff;
        }
    </style>
</head>

<body style="background:#fff">
    <div v-cloak id="register_two" class="register_two">

        <section class="register_one register_pub" v-show="state == 0">
            <div class="register_one_title">
                <h1>欢迎您！</h1>
                <!-- <p>欢迎使用<span id="appname"></span></p> -->
            </div>
            <!-- <div class="register_one_input">
                <span class="phone_left">+86</span>
                <input class="" type="number" maxlength="11" v-model="input" id="phone" @click="inputClick('phone')" placeholder="请输入手机号" oninput="if(value.length>11)value=value.slice(0,11)">
                <span class="phone_right" @click="clearPhone"></span>
            </div>
            <div class="register_one_next">
                <button class="nextStep" @click="nextStep">下一步</button>
            </div> -->
        </section>

        <section>
          <div class="input-box">
              <div class="input-pub phone">
                  <input type="number" v-model="input" id="phone" placeholder="请输入手机号码" @click="inputClick('phone')">
              </div>
              <!-- <div class="input-pub code">
                  <input type="text" v-model="code" id="code" placeholder="请输入验证码" @click="inputClick('code')">
                  <span class="code-btn" @click="getCode">{{codeText}}</span>
              </div> -->
              <div class="submit" @click="login">登录</div>
          </div>
        </section>

        <!-- <section class="register_one register_pub" v-show="state !== 0">
            <div class="register_one_title">
                <h1>注册</h1>
                <p>请输入{{input}}收到的验证码</p>
            </div>
            <div class="register_two_input">
                <input class="" type="number" maxlength="11" v-model="code" id="code" @click="inputClick('code')" placeholder="验证码">
            </div>
            <div class="register_one_next">
                <span class="getCode" @click="getCode" v-show="codeState">获取验证码</span>
                <span class="times" v-show="!codeState">时间剩余{{time}}s</span>
                <button class="nextStep" @click="login">登录</button>
            </div>
        </section> -->
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script src="../../script/jquery.min.js"></script>
<script type="text/javascript">
    apiready = function() {
      FastClick.attach(document.body);
      var appName = api.appName;
      // var appname = $api.byId('appname');
      // appname.innerHTML = appName;
      var vm = new Vue({
          el: '#register_two',
          data: {
              state: 0,
              input: '',
              code: '',
              codeState: true,
              time: 120,
              codeText: '发送验证码'
          },
          methods: {
              nextStep: function() {
                  if (this.input.length == 11) {
                      this.state = 1
                  } else {
                      alert('手机号码不正确')
                  }
              },
              inputClick(id) {
                  $api.byId(id).focus()
              },
              clearPhone: function() {
                this.input = ''
              },
              getCode: function() {
                  var that = this;
                  var systemType = api.systemType
                  var channel = ''
                  if (systemType === 'ios') {
                    channel = 'appStore'
                  } else if (systemType === 'android') {
                    channel = 'xiaomi'
                  }
                  alert(channel)
                  if (that.input === '') {
                    alert('请填写手机号码')
                    return false
                  } else if (this.input.length !== 11) {
                    alert('手机号码不正确')
                    return false
                  }
                  that.codeText = 120;
                  let timer = setInterval(() => {
                      that.codeText--;
                      if (that.codeText === 0) {
                          clearInterval(timer);
                          that.codeText = '发送验证码'
                      }
                  }, 1000);
                  // that.codeState = false;
                  // let timer = setInterval(() => {
                  //     that.time--;
                  //     if (that.time === 0) {
                  //         clearInterval(timer);
                  //         that.codeState = true;
                  //         that.time = 120;
                  //     }
                  // }, 1000);

                  $.ajax({
                  		type: "get",
                      url: "http://res.yuanguinfo.com/account/code",
                  		dataType: 'json',
                  		async:false,
                  		data:{
                        did: '12345678-9012-3456-7890-123456789012',
                        boundleId: 'com.yuanguinfo.xiaotang',
                        channel: channel,
                        phone: that.input,
                        develop: false
                      },
                  		success: function(data){
                  		},
                      fail: function(data){
                      }
                  });
              },
              login: function() {
                var that = this
                if (that.input === '') {
                  alert('请填写手机号码')
                  return false
                } else if (this.input.length !== 11) {
                  alert('手机号码不正确')
                  return false
                }
                var systemType = api.systemType
                var channel = ''
                if (systemType === 'ios') {
                  channel = 'appStore'
                } else if (systemType === 'android') {
                  channel = 'xiaomi'
                }
                $.ajax({
                    type: "get",
                    url: "http://res.yuanguinfo.com/account/login",
                    dataType: 'json',
                    async:false,
                    data:{
                      did: '12345678-9012-3456-7890-123456789012',
                      boundleId: 'com.yuanguinfo.xiaotang',
                      channel: channel,
                      phone: that.input,
                      // code: that.code,
                      check: 0,
                      version: '1.0'
                    },
                    success: function(data){
                      $api.setStorage('phone', that.input)
                      $api.isDownload(api.pageParam.item, api.pageParam.key)
                      // api.alert({
                      //     title: "提示",
                      //     msg: '登录成功',
                      //     buttons: ['确定']
                      // }, function(ret, err) {
                      // });
                    }
                });
              }
          },
          created: function() {},
          mounted: function() {}
      })
    };

</script>
<style>
body,
html {
    background: #fff;
}

.login-box {
    width: 100%;
    background: #fff;
}

.logo-box {
    width: 100%;
    margin-top: 105px;
    text-align: center;
}

.logo-box img {
    text-align: center;
    margin-left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 64px;
}

.input-box {
    margin-top: 53px;
    padding: 0 18px;
}

.input-pub {
    position: relative;
    border-bottom: #dbdbdb solid 1px;
    padding: 17px 0;
    margin-bottom: 14px;
}

.input-pub input {
    position: relative;
    ;
    width: 100%;
    height: 28px;
    padding-left: 32px;
    font-size: 14px;
    line-height: 28px;
    box-sizing: border-box;
}

.phone {
    background: url() no-repeat left 0.186667rem center;
    background-size: 12px 16px;
}

.code {
    background: url() no-repeat left 0.186667rem center;
    background-size: 12px 14px;
}

.code-btn {
    position: absolute;
    top: 14px;
    right: 0;
    z-index: 55;
    display: block;
    width: 86px;
    height: 32px;
    background: #4b6ff9;
    font-size: 12px;
    color: #fff;
    text-align: center;
    line-height: 32px;
    border-radius: 16px;
}

.submit {
    width: 100%;
    height: 42px;
    margin-top: 32px;
    background: #4b6ff9;
    /*background: -webkit-linear-gradient(left, #f4a123, #f46a21);
    background: -o-linear-gradient(right, #f4a123, #f46a21);
    background: -moz-linear-gradient(right, #f4a123, #f46a21);
    background: linear-gradient(to right, #f4a123, #f46a21);*/
    text-align: center;
    line-height: 42px;
    font-size: 16px;
    color: #fff;
    border-radius: 21px;
    box-shadow: 0 5px 12px 5px rgba(244, 158, 35, 0.1)
}
</style>
</html>
